<template>
	
	<view class="asset">
		<view class="head" style="z-index: 999;">
			<view class="" >
				<view class="head_text" @click="black()" >返回</view>
				<image src="../../../static/public/img/fh.png"
					style="width: 18px;height: 18px;position: absolute;top:33px;left: 15px;" ></image>
			</view>

			<view style="width: 10%;height: 25px;position: absolute;top:30px;right:5px;font-size: 14px;"  @click="sx(issx)">筛选</view>	
		</view>
		<tab :lists="lists" :tab_color="tab_color" @switchover="switchover" :gauge="gauge"></tab>
		
			<view style="width:100%;padding: 0% 3%;background: white;font-size: 12px;margin-top: 12%;float: left;">
				
			  <view  class="item" @click="gobetDetail(item.id)" v-for="(item,index) in data">	
			   <view style="width:80%;float: left;">	
				<view>
					<text v-if="item.type == 1">高斯贝尔</text>
					<text v-if="item.type == 2">东方通讯</text>
					<text v-if="item.type == 3">立讯精密</text>
					<text style="color: #999;margin-left: 2%;">第{{item.order_no}}笔</text>
				</view>
				<view style="margin-top: 2%;">
					<text style="color: #999;">{{item.number_name}}</text>
				</view>
				<view style="margin-top: 2%;">
					<text style="color: #999;">{{item.create_time}}</text>
				</view>
			   </view>
			   <view style="width:20%;float:left;">
					<view>
						<text v-if="item.is_prize == null">-{{item.unit_price}}元</text>
						<text v-if="item.is_prize == 1">+{{item.p_money}}元</text>
					</view>
					<view style="margin-top: 2%;"> 
						<image src="../../../static/public/img/xia.png" style="width: 18px;height: 18px;margin-left: 40%;"></image>
					</view>
					<view style="margin-top: 2%;">
						<text style="color: #000;" v-if="item.status == 0">待确认</text>
						<!-- <text style="color: #999;">未获利</text> -->
						<!-- <text style="color: #999;">未获利</text> -->
					</view>
			   </view>	
			  </view>
			  
<!-- 			  <view class="item" @click="gobetDetail()">
			   <view style="width:80%;float: left;">	
					<view>
						<text>高斯贝尔</text>
						<text style="color: #999;margin-left: 2%;">第20221212129笔</text>
					</view>
					<view style="margin-top: 2%;">
						<text style="color: #999;">小米概念</text>
					</view>
					<view style="margin-top: 2%;">
						<text style="color: #999;">2022-12-12 10:40:34</text>
					</view>
			   </view>
			   <view style="width:20%;float:left;">
					<view>
						<text>-10.00元</text> 
					</view>
					<view style="margin-top: 2%;"> 
						<image src="../../../static/public/img/xia.png" style="width: 18px;height: 18px;margin-left: 40%;"></image>
					</view>
					<view style="margin-top: 2%;">
						<text style="color: #999;">未获利</text>
					</view>
			   </view>	
			  </view> -->
			  
			</view>
			
			<view v-if="issx" style="width:100%;height: 90px;background-color: #f2f2f2;position: fixed;top:60px;z-index: 99999;font-size: 14px;">
				<view class="sx" @click="sxselected(0)">全部</view>
				<view class="sxs" @click="sxselected(1)">高斯贝尔</view>
				<view class="sx" @click="sxselected(3)">立讯精密</view>
				<view class="sx" @click="sxselected(2)">东方通讯</view>
			</view>
			<view v-if="issx" style="background: black;width:100%;height: 100%;z-index: 9999;position: absolute;top: 0;opacity: 0.5;" @click="sx(issx)"></view>
			
			
	

	</view>
</template>

<script>
	//导入组件
	import Tab from '../../../components/Tab.vue';
	export default {
		data() {
			return {
               //tab切换数组
			   lists:[
				   {id:1,name:'全部'},
				   {id:2,name:'待确认'},
				   {id:3,name:'获利'}
			   ],
			   //tab切换选中的颜色
			   tab_color:'#cd0006',
			   // tab组件position: fixed布局距离头部的位置大小（rpx）
			   gauge:120,
			   issx:false,
			   data:[],
			   swit:1,
			   type:0,
			}
		},
		//定义组件
		components:{
		    Tab
		}, 
		methods: {
             switchover:function(id){
				 // console.log(id)
				 this.swit = id;
				  this.getGameList()
			   },
			   sx(e){
			   	if(e==false){
			   		this.issx=true;
			   	}else{
			   		this.issx=false;
			   	}
			   },
			   sxselected(id){
				   this.issx=false;
				   this.type=id
				   this.getGameList()
				   
			   },
			   black(){
				   uni.navigateBack()
			   },
			   gobetDetail(id){
				   uni.navigateTo({
				   	url:'/pages/components/betDetail/betDetail?id='+id
				   })
			   },
			   getGameList()
			   {
				   this.$api.request('/api/game/getGameList',{type:this.type,status:this.swit}).then(res=>{
					   this.data = res.data.data
				   });
			   }
		},
		onShow() {

		},
		onLoad() {
			this.getGameList()
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #ddd;
	}

	.asset {
	   .head {
	   	background: #151516 !important;
	   	color: #fff;
	   	height: 130rpx;
	   	font-size: 18px;
	   }
	   
	   .head_text {
		 font-size: 14px;
         margin-left: 9%;
	   	 line-height: 160rpx;
	   }
	   .item{
		   width: 100%;
		   float: left;
		   margin-top: 5%;
		   border-bottom: 1px solid #ddd;
		   padding-bottom: 3%;
	   }
	   .sx{
		   width:25%;
		   height: 30px;
		   border:1px solid #d7d7d7;
		   text-align: center;
		   border-radius: 5px;
		   line-height: 30px;
		   background: #fff;
		   margin-left: 5%;
		   float: left;
		   margin-top:3%;
	   }
	   .sxs{
	   		   width:25%;
	   		   height: 30px;
	   		   border:1px solid #cd0006;
	   		   text-align: center;
	   		   border-radius: 5px;
	   		   line-height: 30px;
	   		   background: #fff;
	   		   margin-left: 5%;
	   		   float: left;
	   		   margin-top:3%;
			   color:#cd0006;
			   background: url(../../../static/public/img/xz.png) no-repeat 50% 50%;
			   background-size: 30px;
			   background-position-x: 71px;
			   background-position-y: 5px;
	   }

	}
</style>
